<!DOCTYPE html>
<html>

<head>
    <title>123</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="style/css/uikit.min.css" />
    <link rel="stylesheet" href="style/css/styles.css">
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="style/js/uikit.min.js"></script>
    <link rel='stylesheet' id='wp-markdown-prettify-css'  href='http://eyaslife.com/wp-content/plugins/wp-markdown/css/prettify.css?ver=1.5.1' type='text/css' media='all' />
    <script type='text/javascript' src='http://eyaslife.com/wp-content/plugins/wp-markdown/js/prettify.min.js?ver=1.5.1'></script>
    <script type='text/javascript' src='http://eyaslife.com/wp-content/plugins/wp-markdown/js/markdown.min.js?ver=1.5.1'></script>
</head>

<body>
    <nav class="uk-navbar">
        <ul class="uk-navbar-nav">
            <a href="#" class="nav-left uk-icon-chevron-left"></a>
        </ul>
        <div class="uk-navbar-flip">
            <ul class="uk-navbar-nav">
                <a href="#" class="nav-right"><i class="uk-icon-repeat"></i></a>
            </ul>
        </div>
        <div class="site-title uk-navbar-content uk-navbar-center">
            Eyas Life
        </div>
    </nav>
    <!--content-->
    <div class="uk-grid single-content">
        <div class="uk-width-1-1 text">
          <div class="text-container">
           <div class="text-header">
               <h1 class="text-title">这是标题，还是大标题</h1>
               <div class="attrs">
                   <span class="attr"><i class="uk-icon-clock-o"></i>2001-10-25</span>
                <span class="attr"><i class="uk-icon-eye"></i></i>200</span>
               </div>
           </div>
           <div class="text-content">
						<p>Angular是啥？这里有<a href="http://baike.baidu.com/view/9604951.htm" target="_blank">百度百科</a> ，百度百科够全面了。简单介绍下，就是一个专门用来构建网页应用的js框架，俗称webapp框架。</p>
<p>Angular官网：<a href="http://angularjs.org/">http://angularjs.org/</a> (被xx，你懂的)</p>
<p>Angular文档：<a href="http://www.ngnice.com/docs/api">http://www.ngnice.com/docs/api</a></p>
<p>Angular Github：<a href="https://github.com/angular/angular">https://github.com/angular/angular</a></p>
<p>&nbsp;</p>
<h2>安装</h2>
<p>首先下载，有时候真不知去哪下载，github里面的都是些什么东西呢。好吧，现在有个现成的，点击这里下载：<a href="http://eyaslife.com/wp-content/uploads/2014/10/angular-1.3.0.14.zip">angular-1.3.0.14</a></p>
<p>引入包里的angular.min.js文件</p>
<pre>&lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
</pre>
<p>也可以使用cdn</p>
<pre>&lt;script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.min.js"&gt;&lt;/script&gt;
</pre>
<p>这样子就安装好了。</p>
<h2>第一个Angular应用</h2>
<p>我们来建第一个angular程序，代码如下：</p>
<pre>&lt;!Doctype html&gt;
&lt;html ng-app&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Angular JS&lt;/title&gt;
        &lt;script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;input type="text" ng-model="name"&gt;
        &lt;p&gt;Hello,{{name}}&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>然后打开浏览器试试。在输入框输入一些东西，下面会实时显示输入的内容。好酷。</p>
<p><a href="http://eyaslife.com/wp-content/uploads/2014/10/9110e45bd21b5216771a566b1497e4e6.png"><img class="alignnone size-full wp-image-362" src="http://eyaslife.com/wp-content/uploads/2014/10/9110e45bd21b5216771a566b1497e4e6.png" alt="QQ截图20141030113915" width="453" height="174" /></a></p>
<p>我们来看看以上的程序，当应用被浏览器加载时，标记有 <code>ng-app</code> 的区域将会被AngularJS解析并引导应用。这里我放在整个 html 标签上表示整个页面都是交给AngularJs解析。</p>
<p>然后是 input 有一个<code>ng-model</code> 表示input绑定一个数据模型 name ，即给name赋值，然后下面使用 {{name}} 显示name的值，<code>{{}}</code> 是AngularJs用户模板输出值的标识符。</p>
                    </div>
            </div>
        </div>
    </div>
    
</body>

</html>